import React,{useState,useEffect} from 'react'
import { NavLink } from 'react-router-dom'
import { getYouth } from "../../../components/api"
import style from "../All/all.module.css"
const {div, img ,mu}=style
export default function All() {
    let [youthList,setYouthList]=useState<any>({})
    const getAuthorList = async() => {
        let res = await getYouth()
        // console.log(res);
        setYouthList(res.data.list1)
        
    }
    let til = youthList.title
    let book_list: any = youthList.book_list
    useEffect(() => {
        getAuthorList()
    }, [])
    const add = () => {
        window.history.go(-1);
    }
  return (
      <div className={div}>
          
          <h2>
             
                  <span onClick={add}>&lt;</span>
             
              

              {youthList.title}</h2>
          {
           
              <ul>
                  
                  {
                      book_list?.map((item: any) => <li key={item.id}>
                          <NavLink to={"/bookdetail/" + item.id}>
                              <div className={mu}>
                                 <img className={img} src={item.img} alt="" />
                              <dl>
                                  <dt>{item.name}</dt>
                                  <dd>{item.author}</dd>
                              </dl> 
                              </div>
                              
                          </NavLink>
                      </li>)
                  }
              </ul> 
          }
          
         
          {
           
              <ul>
                  
                  {
                      book_list?.map((item: any) => <li key={item.id}>
                          {/* <NavLink to={"/bookdetail/" + item.id}> */}
                              <img className={img} src={item.img} alt="" />
                              <dl>
                                  <dt>{item.name}</dt>
                                  <dd>{item.author}</dd>
                              </dl>
                          {/* </NavLink> */}
                      </li>)
                  }
              </ul> 
          }

      </div>
      
  )
}
